<!--
 * @Description: 修改备注的弹窗
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 17:21:37
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-29 16:04:31
 -->
<template>
  <div class="div-inline">
    <el-button size="mini" type="primary" plain class="el-icon-edit el-button-mini-2-5" @click="to" />
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'修改营养师信息'" width="500px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="选择营养师">
          <el-select v-model="form.principal" size="small" filterable placeholder="选择营养师" style="width: 200px;" class="filter-item">
            <el-option v-for="item in principals" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: {
    principal: {
      type: Number,
      required: true
    },
    serviceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: '',
        remark: ''
      },
      dialog: false,
      loading: false,
      principals: []
    }
  },
  methods: {
    to() {
      this.form = {
        id: this.serviceId,
        princiapl: this.principal,
      }
      this.dialog = true

      //获取当前管理员的部门成员信息
      this.$api.permission.user
        .getSubordinate()
        .then(res => {
          this.principals = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    doSubmit() {
      this.$api.order.service
        .updatePrincipal({
          data: this.form
        })
        .then(res => {
          this.$notify({ title: '提示', message: '修改营养师成功', type: 'success', duration: 2500 })
          this.dialog = false
          this.$emit('init')
        }).catch(err => {
          console.log(err)
          this.$notify({ title: '错误', message: '修改营养师失败', type: 'error', duration: 2500 })
        })
    }
  }
}
</script>

<style scoped>
  .div-inline {
    display: inline;
    margin-right: 3px;
  }
</style>
